<style>
.table-title{
  margin-bottom:20px;
}
.el-icon-delete{
  color:red;
  cursor: pointer;
}
.factory-tree{
  display: none;
  position: absolute;
  top: 41px;
  width: 660px;
  z-index: 99;
  border: 1px solid #dadada;
  border-radius: 10px;
  padding: 20px;
}
.show-tree:hover .factory-tree{
  display: block;
}
</style>
<template>
<div>
  <div class="table-title">
    <el-button type="danger" @click="addMaster" icon="el-icon-circle-plus">添加</el-button>
    <el-button>批量导入</el-button>
  </div>
  <el-table :data="tableData" border>
    <el-table-column label="操作" align="center" width="60">
      <template slot-scope="scope">
        <i class="el-icon-delete" title="删除" @click="tableData.splice(scope.index,1)"></i>
      </template>
    </el-table-column>
    <el-table-column label="采购组织" align="center" prop="purOrgName"></el-table-column>
    <el-table-column label="工厂" align="center" prop="factoryName"></el-table-column>
    <el-table-column label="物料编码" align="center" prop="materialCode"></el-table-column>
    <el-table-column label="物料名称" align="center" prop="materialName"></el-table-column>
    <el-table-column label="型号/规格" align="center" prop="materialSpec"></el-table-column>
    <el-table-column label="单位" align="center" prop="stockUnit"></el-table-column>
    <el-table-column label="质保期" align="center" prop="qualityTime"></el-table-column>
    <el-table-column label="采购量" align="center" prop="planQty"></el-table-column>
    <el-table-column label="交期" align="center" prop="deliveryDate"></el-table-column>
    <el-table-column label="备注" align="center" prop="remarks"></el-table-column>
  </el-table>


  <el-dialog title="新增供应商" :visible.sync="dialogFormVisible" class="dialog-form" width="800px">
    <el-form :model="addMaterData" :inline="true" :rules="rules"  label-width="100px" ref="addMaterForm">
      <el-form-item style="position:absolute;top: 40px;left: 122px;">
        <el-checkbox v-model="checked" @change="changeMater">无料号</el-checkbox>
      </el-form-item>
      <el-form-item label="工厂：" prop="factoryIds" style="width:100%" class="show-tree">
        <el-input v-model="checkcategorysName" readonly></el-input>
        <el-tree
          class="factory-tree"
          :data="categoryOptions"
          show-checkbox
          node-key="Id"
          :props="categoryprops"
          @check="setCategory">
        </el-tree>
      </el-form-item>
      <!-- <el-form-item label="采购组织：" prop="purOrgId">
          <el-select v-model="addMaterData.purOrgId" placeholder="请选择" @change="handleChange">
              <el-option v-for="item in purOrgOptions" :key="item.id" :label="item.purOrgName" :value="item.id"></el-option>
          </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="工厂：" prop="factoryId">
        <el-select v-model="addMaterData.factoryId" placeholder="请选择" @change="getmaterialList(addMaterData.purOrgId,addMaterData.factoryId)">
          <el-option v-for="item in relationFactory" :key="item.id" :label="item.factoryName" :value="item.id"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="物料编码：" prop="materialId" v-if="!checked">
        <select-fac-material v-model="addMaterData.materialId" @on-selection-data="getRowData" :factoryIds="addMaterData.factoryIds"></select-fac-material>
      </el-form-item>
      <el-form-item label="物料名称：" prop="materialName">
          <el-input v-model="addMaterData.materialName" :disabled="!checked"></el-input>
      </el-form-item>
      <el-form-item label="采购单位：" prop="materialUnit" v-if="checked">
          <el-select v-model="addMaterData.materialUnit"  placeholder="请选择" filterable>
            <el-option v-for="item in utilList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="采购单位：" prop="materialUnit" v-else>
          <el-input v-model="addMaterData.materialUnit" :disabled="!checked"></el-input>
      </el-form-item>
      <el-form-item label="库存单位：" prop="stockUnit" v-if="checked">
          <el-select v-model="addMaterData.stockUnit" placeholder="请选择" filterable>
            <el-option v-for="item in utilList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="采购单位：" prop="stockUnit" v-else>
          <el-input v-model="addMaterData.stockUnit" :disabled="!checked"></el-input>
      </el-form-item>
      <el-form-item label="采购量：" prop="planQty">
          <el-input v-model="addMaterData.planQty"></el-input>
      </el-form-item>
      <el-form-item label="型号/规格：" prop="materialSpec">
          <el-input v-model="addMaterData.materialSpec"></el-input>
      </el-form-item>
      <el-form-item label="质保期：" prop="qualityTime">
          <el-input v-model="addMaterData.qualityTime"></el-input>
      </el-form-item>
      <el-form-item label="交期：" prop="deliveryDate">
          <el-date-picker
          v-model="addMaterData.deliveryDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="交期"
          :picker-options="pickeroptions">
          </el-date-picker>
      </el-form-item>
      <el-form-item label="描述：" prop="remarks" style="width:100%">
          <el-input v-model="addMaterData.remarks" type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" @click="insertRow">确定</el-button>
    </div>
  </el-dialog>
</div>
</template>
<script>
  import SelectFacMaterial from '@/components/bid/components/select-facMaterial.vue';
  export default {
    components: {
      SelectFacMaterial
    },
    props:['tableData'],
    data() {
      return {
        categoryprops: {
            label:'label',
            value: 'Id',
            children: 'children'
        },
        categoryOptions: [
            {Id:1,label:'西南1',children:[{Id:101,label:'西南1工厂'},{Id:102,label:'西南2工厂'}]},
            {Id:2,label:'西南2',children:[{Id:201,label:'西南2工厂'},{Id:103,label:'西南21工厂'}]},
            {Id:3,label:'西南3',children:[{Id:301,label:'西南3工厂'},{Id:104,label:'西南22工厂'}]},
            {Id:4,label:'西南4',children:[{Id:401,label:'西南4工厂'},{Id:105,label:'西南23工厂'}]},
            {Id:5,label:'西南5',children:[{Id:501,label:'西南5工厂'},{Id:106,label:'西南24工厂'}]}
        ],
        checkcategorysName:'',
        checkcategorys:[],
        checked:false,
        dialogFormVisible:false,
        relationFactory:[],
        purOrgOptions:[],
        materialList:[],
        utilList:[],
        addMaterData:{
          materialId:"",
          factoryIds:[],
          materialCode:"",
          materialName:"",
          materialSpec:"",
          materialUnit:"",
          stockUnit:"",
          qualityTime:"",
          planQty:"",
          deliveryDate:"",
          remarks:""
        },
        rules:{
          // purOrgId:[{required: true, message: '请选择采购组织', trigger: 'change'}],
          factoryIds:[{required: true,type:'array', message: '请选择工厂', trigger: 'change'}],
          materialCode:[{required: true, message: '请输入物料编码', trigger: 'change'}],
          materialId:[{required: true, message: '请选择物料编码', trigger: 'change'}],
          materialName:[{required: true, message: '请输入物料名称', trigger: 'blur'}],
          materialSpec:[{required: true, message: '请输入型号/规格', trigger: 'blur'}],
          stockUnit:[{required: true, message: '请选择库存单位', trigger: 'change'}],
          materialUnit:[{required: true, message: '请选择物料单位', trigger: 'change'}],
          qualityTime:[{required: true, message: '请输入质保期', trigger: 'blur'}],
          planQty:[{required: true, message: '请输入采购量', trigger: 'blur'}],
          deliveryDate:[{required: true, message: '请选择交期', trigger: 'change'}],
          remarks:[]
        },
        pickeroptions:{
          disabledDate(time) {
            return time.getTime() < Date.now()
          }
        },
      };
    },
    mounted() {
      // 获取采购组织
      this.getSelectData('get', this.lib.config.host.masterData + '/system/purOrgMgt/purOrg/getPurOrgByUserId/' + this.getCurrUserId(), {}, 'id', 'purOrgName').then((data)=>{
        this.purOrgOptions = data;
      });
      this.axios.post(this.lib.config.host.masterData + '/common/sysdictionary/getDicItems/MATERIAL_UNIT').then((res)=>{
        this.utilList=res.data;
      })
      this.axios.post(this.lib.config.host.system + '/system/purOrgMgt/purOrg/getPurOrgWithFactory').then((res)=>{
        this.checkcategorys=res.data;
      })
    },
    watch:{
    },
    methods: {
      getCategory(item){

      },
      setCategory(item,rows){
        console.log(rows)
        let data=[];
        this.addMaterData.factoryIds=[];
        rows.checkedNodes.forEach(item=>{
          if(!item.children){
            data.push(item.label);
            this.addMaterData.factoryIds.push(item.Id);
          }
        })
        this.checkcategorysName=data.join(',')
        this.getmaterialList(this.addMaterData.factoryIds)
      },
      // 采购组织在改变的时候查询采购组
      // handleChange(value) {
      //   // 获取采购组织对应的工厂purOrgName factoryName materialCode
      //   this.purOrgOptions.forEach(res=>{
      //     if(res.id===value){
      //       this.addMaterData.purOrgName=res.purOrgName
      //     }
      //   })
      //   this.addMaterData.materialId='';
      //   this.addMaterData.factoryId='';
      //   this.getSelectData('post', this.lib.config.host.masterData + '/system/factoryMgt/factorys/getFactoryByPurId/' + value, {}, 'id', 'factoryName').then((data)=>{
      //       this.relationFactory = data;
      //   });
      // },
      getmaterialList(factoryIds){
        let data={
          // purOrgId:purOrgId,
          factoryIds:factoryIds,
          pageNo:1,
          pageSize:10
        }
        this.addMaterData.materialId='';
        this.axios.post(this.lib.config.host.masterData + '/mdata/material/getMaterialByFactory', data).then((res)=>{
          this.materialList=res.data.rows;
        })
      },
      changeMater(){
        if(this.checked){
          this.addMaterData.materialId = '';
          this.addMaterData.materialName = '';
          this.addMaterData.materialCode = '';
          this.addMaterData.materialUnit = '';
          this.addMaterData.stockUnit = '';
        }
      },
      addMaster(){
        this.addMaterData.materialId='';
        this.dialogFormVisible=true;
        this.$nextTick(()=>{
          this.resetForm('addMaterForm')
        })
      },
      getRowData(data){
        this.addMaterData.materialId = data.materialId;
        this.addMaterData.materialName = data.materialName;
        this.addMaterData.materialCode = data.materialCode;
        this.addMaterData.materialUnit = data.purUnitName;
        this.addMaterData.stockUnit = data.stockUnitName;
      },
      getmaterialUnit(){

      },
      getstockUnit(){

      },
      insertRow(){
        this.$refs.addMaterForm.validate((valid) => {
          if(valid){
            this.tableData.push({...this.addMaterData});
            this.dialogFormVisible=false;
          }
        })
      }
    }
  }
</script>
<style>
</style>
